<template>
<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-toolbar
        card
        color="grey lighten-3"
      >
        <v-icon>bookmark_border</v-icon>
        <v-toolbar-title>Local hotspots</v-toolbar-title>
      </v-toolbar>
      <v-layout>
        <v-flex>
          <v-card-text>
            <v-treeview
              :active.sync="active"
              :items="items"
              :open.sync="open"
              activatable
              active-class="primary--text"
              class="grey lighten-5"
              open-on-click
              transition
              :return-object="true"
            >
            </v-treeview>
          </v-card-text>
        </v-flex>
        <v-divider vertical></v-divider>
        <v-flex
          xs12
          md6
        >
          <v-card-text>
            <v-scroll-x-transition
              group
              hide-on-leave
            >
               <v-chip
              v-for="(selection, i) in this.active"
              :key="i"
              color="grey"
              dark
              small
            > <v-icon left small>mdi-beer</v-icon>
              Name: {{ selection.name }} \ Template_Path: {{ selection.template_file }}
               </v-chip>
            </v-scroll-x-transition>
          </v-card-text>
        </v-flex>
      </v-layout>
      <v-divider></v-divider>
    </v-card>
    <v-card>
    <nginx_list :value="selections"></nginx_list>
    </v-card>
  </v-app>
</div>

</template>

<script>
import { mapActions } from 'vuex'
export default {
  data: function () {
    return this.$store.state.nginxlist
  },
  computed: {
    selections () {
      const selections = []
      for (const host of this.active) {
        // console.log('host' + JSON.stringify(host.upstreams) + '#host_id' + JSON.stringify(host.id))
        if (host['children']) {
          for (const upstream of host['children']) {
            selections.push(upstream)
          }
        }
        console.log(JSON.stringify(selections))
        return selections
      }
    }
  },
  mounted () {
    this.loadfetchNginxForm()
  },
  methods: {
    ...mapActions({
      loadfetchNginxForm: 'fetchNginxForm'
    })
  },
  components: {
    nginx_list: () => import('./nginx_tables')
  }
}
</script>
